<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>购物车页面</h1>
					<div id="box1" class="box">
						<h2>1. 创建购物车页面的编译模式</h2>
						<ol>
							<li>
								<p>打开微信开发者工具，点击工具栏上的“编译模式”下拉菜单，选择“添加编译模式”：</p>
								<el-image style="width: 100%;" :src="srcList[0]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>勾选“启动页面的路径”之后，点击“确定”按钮，新增购物车页面的编译模式：</p>
								<el-image style="width: 100%;" :src="srcList[1]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
						</ol>

					</div>
					<div class="box" id="box2">
						<h2>2. 商品列表区域</h2>
						<div class="item" id="box2-1">
							<h3>2-1. 渲染购物车商品列表的标题区域</h3>
							<ol>
								<li>
									<p>定义如下的 UI 结构：</p>
									<code-mirror :value="code[0]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化样式：</p>
									<code-mirror :value="code[1]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-2">
							<h3>2-2. 渲染商品列表区域的基本结构</h3>
							<ol>
								<li>
									<p>通过 mapState 辅助函数，将 Store 中的 cart 数组映射到当前页面中使用：</p>
									<code-mirror :value="code[2]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 UI 结构中，通过 v-for 指令循环渲染自定义的 my-goods 组件：</p>
									<code-mirror :value="code[3]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-3">
							<h3>2-3. 为 my-goods 组件封装 radio 勾选状态</h3>
							<ol>
								<li>
									<p>打开 my-goods.vue 组件的源代码，为商品的左侧图片区域添加 radio 组件：</p>
									<code-mirror :value="code[4]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>给类名为 goods-item-left 的 view 组件添加样式，实现 radio 组件和 image 组件的左右布局：</p>
									<code-mirror :value="code[5]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>封装名称为 showRadio 的 props 属性，来控制当前组件中是否显示 radio 组件：</p>
									<code-mirror :value="code[6]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>使用 v-if 指令控制 radio 组件的按需展示：</p>
									<code-mirror :value="code[7]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 cart.vue 页面中的商品列表区域，指定 :show-radio="true" 属性，从而显示 radio 组件：</p>
									<code-mirror :value="code[8]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>修改 my-goods.vue 组件，动态为 radio 绑定选中状态：</p>
									<code-mirror :value="code[9]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-4">
							<h3>2-4. 为 my-goods 组件封装 radio-change 事件</h3>
							<ol>
								<li>
									<p>当用户点击 radio 组件，希望修改当前商品的勾选状态，此时用户可以为 my-goods 组件绑定 @radio-change 事件，从而获取当前商品的
										goods_id 和 goods_state：</p>
									<code-mirror :value="code[10]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>定义 radioChangeHandler 事件处理函数如下：</p>
									<code-mirror :value="code[11]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 my-goods.vue 组件中，为 radio 组件绑定 @click 事件处理函数如下：</p>
									<code-mirror :value="code[12]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 my-goods.vue 组件的 methods 节点中，定义 radioClickHandler 事件处理函数：</p>
									<code-mirror :value="code[13]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-5">
							<h3>2-5. 修改购物车中商品的勾选状态</h3>
							<ol>
								<li>
									<p>在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的勾选状态：</p>
									<code-mirror :value="code[14]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 cart.vue 页面中，导入 mapMutations 这个辅助函数，从而将需要的 mutations 方法映射到当前页面中使用：</p>
									<code-mirror :value="code[15]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-6">
							<h3>2-6. 为 my-goods 组件封装 NumberBox</h3>
							<div class="tip">注意：NumberBox 组件是 uni-ui 提供的</div>
							<ol>
								<li>
									<p>修改 my-goods.vue 组件的源代码，在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构：</p>
									<code-mirror :value="code[16]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化页面的结构：</p>
									<code-mirror :value="code[17]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 my-goods.vue 组件中，动态为 NumberBox 组件绑定商品的数量值：</p>
									<code-mirror :value="code[18]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 my-goods.vue 组件中，封装名称为 showNum 的 props 属性，来控制当前组件中是否显示 NumberBox 组件：</p>
									<code-mirror :value="code[19]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 my-goods.vue 组件中，使用 v-if 指令控制 NumberBox 组件的按需展示：</p>
									<code-mirror :value="code[20]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 cart.vue 页面中的商品列表区域，指定 :show-num="true" 属性，从而显示 NumberBox 组件：</p>
									<code-mirror :value="code[21]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-7">
							<h3>2-7. 为 my-goods 组件封装 num-change 事件</h3>
							<ol>
								<li>
									<p>当用户修改了 NumberBox 的值以后，希望将最新的商品数量更新到购物车中，此时用户可以为 my-goods 组件绑定 @num-change
										事件，从而获取当前商品的 goods_id 和 goods_count：</p>
									<code-mirror :value="code[22]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>定义 numberChangeHandler 事件处理函数如下：</p>
									<code-mirror :value="code[23]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 my-goods.vue 组件中，为 uni-number-box 组件绑定 @change 事件处理函数如下：</p>
									<code-mirror :value="code[24]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 my-goods.vue 组件的 methods 节点中，定义 numChangeHandler 事件处理函数：</p>
									<code-mirror :value="code[25]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-8">
							<h3>2-8. 解决 NumberBox 数据不合法的问题</h3>
							<div class="tip">
								问题说明：当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问题
							</div>
							<ol>
								<li>
									<p>打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 methods 节点中的 _onBlur
										函数如下：</p>
									<code-mirror :value="code[26]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>修改完毕之后，用户输入小数会被转化为整数，用户输入非法字符会被替换为默认值 1</p>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-9">
							<h3>2-9. 完善 NumberBox 的 inputValue 侦听器</h3>
							<div class="tip">
								问题说明：在用户每次输入内容之后，都会触发 inputValue 侦听器，从而调用 this.$emit("change", newVal)
								方法。这种做法可能会把不合法的内容传递出去！
							</div>
							<ol>
								<li>
									<p>打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 watch 节点中的 inputValue
										侦听器如下：</p>
									<code-mirror :value="code[27]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>修改完毕之后，NumberBox 组件只会把合法的、且不包含小数点的新值传递出去</p>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-10">
							<h3>2-10. 修改购物车中商品的数量</h3>
							<ol>
								<li>
									<p>在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的数量：</p>
									<code-mirror :value="code[28]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 cart.vue 页面中，通过 mapMutations 这个辅助函数，将需要的 mutations 方法映射到当前页面中使用：</p>
									<code-mirror :value="code[29]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-11">
							<h3>2-11. 渲染滑动删除的 UI 效果</h3>
							<div class="tip">
								滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item。详细的官方文档请参考SwipeAction 滑动操作。
							</div>
							<ol>
								<li>
									<p>改造 cart.vue 页面的 UI 结构，将商品列表区域的结构修改如下（可以使用 uSwipeAction 代码块快速生成基本的 UI 结构）：</p>
									<code-mirror :value="code[30]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 data 节点中声明 options 数组，用来定义操作按钮的配置信息：</p>
									<code-mirror :value="code[31]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 methods 中声明 uni-swipe-action-item 组件的 @click 事件处理函数：</p>
									<code-mirror :value="code[32]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>美化 my-goods.vue 组件的样式：</p>
									<code-mirror :value="code[33]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box2-12">
							<h3>2-12. 实现滑动删除的功能</h3>
							<ol>
								<li>
									<p>在 store/cart.js 模块的 mutations 节点中声明如下的方法，从而根据商品的 Id 从购物车中移除对应的商品：</p>
									<code-mirror :value="code[34]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 cart.vue 页面中，使用 mapMutations 辅助函数，把需要的方法映射到当前页面中使用：</p>
									<code-mirror :value="code[35]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div class="box" id="box3">
						<h2>3. 收货地址区域</h2>
						<div class="item" id="box3-1">
							<h3>3-1. 创建收货地址组件</h3>
							<ol>
								<li>
									<p>在 components 目录上鼠标右键，选择 新建组件，并填写组件相关的信息：</p>
									<el-image style="width: 100%;" :src="srcList[2]" fit="contain"
										:preview-src-list="srcList">
									</el-image>
								</li>
								<li>
									<p>渲染收货地址组件的基本结构：</p>
									<code-mirror :value="code[36]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化收货地址组件的样式：</p>
									<code-mirror :value="code[37]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-2">
							<h3>3-2. 实现收货地址区域的按需展示</h3>
							<ol>
								<li>
									<p>在 data 中定义收货地址的信息对象：</p>
									<code-mirror :value="code[38]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>使用 v-if 和 v-else 实现按需展示：</p>
									<code-mirror :value="code[39]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-3">
							<h3>3-3. 实现选择收货地址的功能</h3>
							<ol>
								<li>
									<p>为 请选择收货地址+ 的 button 按钮绑定点击事件处理函数：</p>
									<code-mirror :value="code[40]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>定义 chooseAddress 事件处理函数，调用小程序提供的 chooseAddress() API 实现选择收货地址的功能：</p>
									<code-mirror :value="code[41]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>定义收货详细地址的计算属性：</p>
									<code-mirror :value="code[42]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>渲染收货地址区域的数据：</p>
									<code-mirror :value="code[43]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-4">
							<h3>3-4. 将 address 信息存储到 vuex 中</h3>
							<ol>
								<li>
									<p>在 store 目录中，创建用户相关的 vuex 模块，命名为 user.js：</p>
									<code-mirror :value="code[44]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 store/store.js 模块中，导入并挂载 user.js 模块：</p>
									<code-mirror :value="code[45]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>改造 address.vue 组件中的代码，使用 vuex 提供的 address 计算属性 替代 data 中定义的本地 address 对象：</p>
									<code-mirror :value="code[46]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-5">
							<h3>3-5. 将 Store 中的 address 持久化存储到本地</h3>
							<ol>
								<li>
									<p>修改 store/user.js 模块中的代码如下：</p>
									<code-mirror :value="code[47]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-6">
							<h3>3-6. 将 addstr 抽离为 getters</h3>
							<div class="tip">
								目的：为了提高代码的复用性，可以把收货的详细地址抽离为 getters，方便在多个页面和组件之间实现复用。
							</div>
							<ol>
								<li>
									<p>剪切 my-address.vue 组件中的 addstr 计算属性的代码，粘贴到 user.js 模块中，作为一个 getters 节点：</p>
									<code-mirror :value="code[48]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>改造 my-address.vue 组件中的代码，通过 mapGetters 辅助函数，将 m_user 模块中的 addstr 映射到当前组件中使用：</p>
									<code-mirror :value="code[49]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-7">
							<h3>3-7. 重新选择收货地址</h3>
							<ol>
								<li>
									<p>为 class 类名为 address-info-box 的盒子绑定 click 事件处理函数如下：</p>
									<code-mirror :value="code[50]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-8">
							<h3>3-8. 解决收货地址授权失败的问题</h3>
							<div class="tip">
								如果在选择收货地址的时候，用户点击了取消授权，则需要进行特殊的处理，否则用户将无法再次选择收货地址！
							</div>
							<ol>
								<li>
									<p>改造 chooseAddress 方法如下：</p>
									<code-mirror :value="code[51]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 methods 节点中声明 reAuth 方法如下：</p>
									<code-mirror :value="code[52]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-9">
							<h3>3-9. 解决 iPhone 真机上无法重新授权的问题</h3>
							<div class="tip">问题说明：在 iPhone 设备上，当用户取消授权之后，再次点击选择收货地址按钮的时候，无法弹出授权的提示框！</div>
							<ol>
								<li>
									<p>导致问题的原因 - 用户取消授权后，再次点击 “选择收货地址” 按钮的时候：</p>
									<ul>
										<li>在模拟器和安卓真机上，错误消息 err.errMsg 的值为 chooseAddress:fail auth deny</li>
										<li>在 iPhone 真机上，错误消息 err.errMsg 的值为 chooseAddress:fail authorize no response
										</li>
									</ul>
								</li>
								<li>
									<p>解决问题的方案 - 修改 chooseAddress 方法中的代码，进一步完善用户没有授权时的 if 判断条件即可：</p>
									<code-mirror :value="code[53]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div class="box" id="box4">
						<h2>4. 结算区域</h2>
						<div class="item" id="box4-1">
							<h3>4-1. 把结算区域封装为组件</h3>
							<ol>
								<li>
									<p>在 components 目录中，新建 my-settle 结算组件：</p>
									<el-image style="width: 100%;" :src="srcList[3]" fit="contain"
										:preview-src-list="srcList">
									</el-image>
								</li>
								<li>
									<p>初始化 my-settle 组件的基本结构和样式：</p>
									<code-mirror :value="code[54]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 cart.vue 页面中使用自定义的 my-settle 组件，并美化页面样式，防止页面底部被覆盖：</p>
									<code-mirror :value="code[55]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-2">
							<h3>4-2. 渲染结算区域的结构和样式</h3>
							<ol>
								<li>
									<p>定义如下的 UI 结构：</p>
									<code-mirror :value="code[56]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化样式：</p>
									<code-mirror :value="code[57]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-3">
							<h3>4-3. 动态渲染已勾选商品的总数量</h3>
							<ol>
								<li>
									<p>在 store/cart.js 模块中，定义一个名称为 checkedCount 的 getters，用来统计已勾选商品的总数量：</p>
									<code-mirror :value="code[58]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 my-settle 组件中，通过 mapGetters 辅助函数，将需要的 getters 映射到当前组件中使用：</p>
									<code-mirror :value="code[59]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>将 checkedCount 的值渲染到页面中：</p>
									<code-mirror :value="code[60]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-4">
							<h3>4-4. 动态渲染全选按钮的选中状态</h3>
							<ol>
								<li>
									<p>使用 mapGetters 辅助函数，将商品的总数量映射到当前组件中使用，并定义一个叫做 isFullCheck 的计算属性：</p>
									<code-mirror :value="code[61]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>为 radio 组件动态绑定 checked 属性的值：</p>
									<code-mirror :value="code[62]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-5">
							<h3>4-5. 实现商品的全选/反选功能</h3>
							<ol>
								<li>
									<p>在 store/cart.js 模块中，定义一个叫做 updateAllGoodsState 的 mutations 方法，用来修改所有商品的勾选状态：</p>
									<code-mirror :value="code[63]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 my-settle 组件中，通过 mapMutations 辅助函数，将需要的 mutations 方法映射到当前组件中使用：</p>
									<code-mirror :value="code[64]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>为 UI 中的 label 组件绑定 click 事件处理函数：</p>
									<code-mirror :value="code[65]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 my-settle 组件的 methods 节点中，声明 changeAllState 事件处理函数：</p>
									<code-mirror :value="code[66]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-6">
							<h3>4-6. 动态渲染已勾选商品的总价格</h3>
							<ol>
								<li>
									<p>在 store/cart.js 模块中，定义一个叫做 checkedGoodsAmount 的 getters，用来统计已勾选商品的总价格：</p>
									<code-mirror :value="code[67]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 my-settle 组件中，使用 mapGetters 辅助函数，把需要的 checkedGoodsAmount 映射到当前组件中使用：</p>
									<code-mirror :value="code[68]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在组件的 UI 结构中，渲染已勾选的商品的总价：</p>
									<code-mirror :value="code[69]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-7">
							<h3>4-7. 动态计算购物车徽标的数值</h3>
							<ol>
								<li>
									<p>问题说明：当修改购物车中商品的数量之后，tabBar 上的数字徽标不会自动更新。</p>
								</li>
								<li>
									<p>解决方案：改造 mixins/tabbar-badge.js 中的代码，使用 watch 侦听器，监听 total 总数量的变化，从而动态为 tabBar
										的徽标赋值：</p>
									<code-mirror :value="code[70]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-8">
							<h3>4-8. 渲染购物车为空时的页面结构</h3>
							<ol>
								<li>
									<p>将 资料 目录中的 cart_empty@2x.png 图片复制到项目的 /static/ 目录中</p>
								</li>
								<li>
									<p>改造 cart.vue 页面的 UI 结构，使用 v-if 和 v-else 控制购物车区域和空白购物车区域的按需展示：</p>
									<code-mirror :value="code[71]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化空白购物车区域的样式：</p>
									<code-mirror :value="code[72]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>

					<div id="box5" class="box">
						<h2>5. 分支的合并与提交</h2>
						<ol>
							<li>
								<p>将 cart 分支进行本地提交：</p>
								<code-mirror :value="code[73]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地的 cart 分支推送到码云：</p>
								<code-mirror :value="code[74]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地 cart 分支中的代码合并到 master 分支：</p>
								<code-mirror :value="code[75]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>删除本地的 cart 分支：</p>
								<code-mirror :value="code[76]" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer'  :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 创建购物车页面的编译模式" />
					<a-anchor-link href="#box2" title="2. 商品列表区域">
						<a-anchor-link href="#box2-1" title="2-1. 渲染购物车商品列表的标题区域"></a-anchor-link>
						<a-anchor-link href="#box2-2" title="2-2. 渲染商品列表区域的基本结构"></a-anchor-link>
						<a-anchor-link href="#box2-3" title="2-3. 为 my-goods 组件封装 radio 勾选状态"></a-anchor-link>
						<a-anchor-link href="#box2-4" title="2-4. 为 my-goods 组件封装 radio-change 事件"></a-anchor-link>
						<a-anchor-link href="#box2-5" title="2-5. 修改购物车中商品的勾选状态"></a-anchor-link>
						<a-anchor-link href="#box2-6" title="2-6. 为 my-goods 组件封装 NumberBox"></a-anchor-link>
						<a-anchor-link href="#box2-7" title="2-7. 为 my-goods 组件封装 num-change 事件"></a-anchor-link>
						<a-anchor-link href="#box2-8" title="2-8. 解决 NumberBox 数据不合法的问题"></a-anchor-link>
						<a-anchor-link href="#box2-9" title="2-9. 完善 NumberBox 的 inputValue 侦听器"></a-anchor-link>
						<a-anchor-link href="#box2-10" title="2-10. 修改购物车中商品的数量"></a-anchor-link>
						<a-anchor-link href="#box2-11" title="2-11. 渲染滑动删除的 UI 效果"></a-anchor-link>
						<a-anchor-link href="#box2-12" title="2-12. 实现滑动删除的功能"></a-anchor-link>
					</a-anchor-link>
					<a-anchor-link href="#box3" title="2. 商品列表区域">
						<a-anchor-link href="#box3-1" title="3-1. 创建收货地址组件"></a-anchor-link>
						<a-anchor-link href="#box3-2" title="3-2. 实现收货地址区域的按需展示"></a-anchor-link>
						<a-anchor-link href="#box3-3" title="3-3. 实现选择收货地址的功能"></a-anchor-link>
						<a-anchor-link href="#box3-4" title="3-4. 将 address 信息存储到 vuex 中"></a-anchor-link>
						<a-anchor-link href="#box3-5" title="3-5. 将 Store 中的 address 持久化存储到本地"></a-anchor-link>
						<a-anchor-link href="#box3-6" title="3-6. 将 addstr 抽离为 getters"></a-anchor-link>
						<a-anchor-link href="#box3-7" title="3-7. 重新选择收货地址"></a-anchor-link>
						<a-anchor-link href="#box3-8" title="3-8. 解决收货地址授权失败的问题"></a-anchor-link>
						<a-anchor-link href="#box3-9" title="3-9. 解决 iPhone 真机上无法重新授权的问题"></a-anchor-link>
					</a-anchor-link>
					<a-anchor-link href="#box4" title="2. 商品列表区域">
						<a-anchor-link href="#box4-1" title="4-1. 把结算区域封装为组件"></a-anchor-link>
						<a-anchor-link href="#box4-2" title="4-2. 渲染结算区域的结构和样式"></a-anchor-link>
						<a-anchor-link href="#box4-3" title="4-3. 动态渲染已勾选商品的总数量"></a-anchor-link>
						<a-anchor-link href="#box4-4" title="4-4. 动态渲染全选按钮的选中状态"></a-anchor-link>
						<a-anchor-link href="#box4-5" title="4-5. 实现商品的全选/反选功能"></a-anchor-link>
						<a-anchor-link href="#box4-6" title="4-6. 动态渲染已勾选商品的总价格"></a-anchor-link>
						<a-anchor-link href="#box4-7" title="4-7. 动态计算购物车徽标的数值"></a-anchor-link>
						<a-anchor-link href="#box4-8" title="4-8. 渲染购物车为空时的页面结构"></a-anchor-link>
					</a-anchor-link>
					<a-anchor-link href="#box5" title="5. 分支的合并与提交" />
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import {
		shopCar
	} from '../../util/code.js'
	import img1 from '@/assets/shopCar1.png'
	import img2 from '@/assets/shopCar2.png'
	import img3 from '@/assets/shopCar3.png'
	import img4 from '@/assets/shopCar4.png'
	export default {
		name: 'shopCar',
		data() {
			return {
				srcList: [img1, img2, img3, img4],
				cmOptions: {
					mode: "javascript",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions1: {
					mode: "vue",
					theme: "base16-dark",
					disabled: true
				},
				code: shopCar
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
